CSS property - position
Home

CSS property - position

CSS property - position

HTML elementen worden in hun natuurlijke volgorde (Natuurlijke flow van elementen op een pagina) geplaatst waarbij alleen rekening wordt gehouden met het feit of de elementen blok- of inline elementen zijn. Je kan de HTML elementen uit hun natuurlijke flow halen door ze expliciet te postioneren. Je moet dus weten hoe je elementen precies plaatst. Met de position eigenschap bepaal je het type van de positioneringmethode die je voor een element wilt gebruiken:
  1. static;
  2. relative;
  3. absolute;
  4. fixed;

Bronnen

Kevin Kononenko, CSS Positioning Explained By Building An Ice Cream Sundae, 28 augustus 2016

  1. Static

    Voor alle elementen in HTML is het position attribuut standaard ingesteld op static. Dit betekent dat de elementen weergegeven worden in de volgorde waarin ze geplaatst zijn in het HTML element, wat we de Natuurlijke flow van elementen op een pagina noemen.

    We hebben een aantal mogelijkheden om de positie van een element op de pagina beinvloeden en uit de natuurlijke volgorde te halen. Dat zijn:

    • position: fixed
    • position: relative
    • position: absolute

  2. Relative

    Met position: relative wordt een element gepositioneerd ten opzichte van zijn static positie. Dat doe je bijvoorbeeld door een top, left, right en/of een bottom waarde toe te kennen aan het element. De instelling position: relative maakt het dus mogelijk om een element te positioneren ten opzichte van de position: static die dit element standaard heeft.

    Of anders gezegd: hetzelfde als static, maar voor alle kinderelementen wordt de linkerbovenhoek nu de referentie van het coördinatenstelsel.

  3. Absoluut

    Bij het absoluut positioneren van een element moet je twee concepten onthouden:

    1. ouder-kind relaties:

      In HTML is elk element een op z'n minst een kind-element van het HTML element. De HTML-tag omsluit alle andere tags, en is daardoor het ouder-element van alle andere html- elementen. Op een meer technische manier zeggen we dat alle andere elementen genest zijn in het HTML-element en dus kinderen van het HTML-elementen zijn. Een kind-element is dus genest dus in een ouder-element, en een ouder-lementen is ouder van alle elementen die er in genest zijn.

    2. het absoluut positioneren van een element gebeurd ten opzichte van het eerste gepositioneerde ouder-element:

      Nu weet je wat ouder- en kind-elementen zijn, is het absoluut positioneren ten opzichte van het eerste gepositioneerde ouder-element, gemakkelijker te begrijpen. Een absoluut gepositioneerd element is gepositioneerd ten opzichte van het eerst gepostioneerde ouder-element. Dit betekent dat een element dat je absoluut positioneert door alle ouder-elementen loopt totdat het het eerste, namelijk een html element tegenkomt, of een elementen waarvan het position attribuut is ingesteld op relative of absolute. Op dat element baseert het te positioneren element zijn positie.

JI
2019-01-29 20:29:16